<style lang="less" scoped>
	.search {
		width: 100%;
		height: 100%;
		background-color: #f7f9fc;
		overflow: hidden;
		.search-top {
			width: 100%;
			background-color: #f7f9fc;
			position: fixed;
			// top: 5px;
			z-index: 1000;
			padding: 20px 0;

			.container {
				width: 92%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				position: relative;

				.ipt {
					position: absolute;
					top: -1px;
					border: 1px solid #eee;
					background-color: #ffffff;
					margin-left: 50px;
					box-shadow: 1px 1px 10px 1px #fefefe;
					height: 30px;
					width: 100px;
					border-radius: 20px;
					padding-left: 15px;

					box-sizing: border-box;
					font-size: 16px;
					width: 70%;
					font-family: Arial, Helvetica, sans-serif;
				}

				.ipt::placeholder {
					color: #eee;
				}

				.btn {
					position: absolute;
					right: -20px;
					// top: px;
					background-color: transparent;
					color: #000;
					width: 60px;
					// height: 40px;
					border: none;
					font-size: 16px;
					font-family: Arial, Helvetica, sans-serif;
				}
			}



		}
		.searchList{
			width: 100%;
			.container{
				width: 92%;
				margin: 0 auto;
				.songLi{
					width: 100%;
					position: relative;
					padding-top: 10px;
					padding-bottom: 10px;
					.index{
						position: absolute;
						top:17px;
						left: -5px;
						text-align: center;
						width: 10%;
						color: #888;
						// background-color: red;
					}
					.song{
						margin-left: 10px;
						.row{
							display: flex;
							.vipTag{
								font-size: 10px;
								margin-top: 6px;
								height: 14px;
								line-height: 12px;
								padding: 0px 5px;
								padding-bottom: 2px;
								color:#eb4d44 ;
								border: 1px solid #f6c5c3;
								box-sizing: border-box;
								border-radius: 3px;
							}
							.tag{
								font-size: 10px;
								margin-top: 6px;
								height: 14px;
								line-height: 12px;
								padding: 0px 5px;
								padding-bottom: 2px;
								color:#dcb25c ;
								border: 1px solid #f4e3bd;
								box-sizing: border-box;
								border-radius: 3px;
								margin-left: 5px;
							}
							.author{
								margin-top: 5px;
								font-size: 12px;
								color: #aaa;
								margin-left: 6px;
							}
						}
					}
					
					.more{
						position: absolute;
						right: 0;
						top: 15px;
						transform: rotate(90deg);
					}
				}
				.bottom{
					margin-top: 15px;
					margin-bottom: 30px;
					width: 100%;
					text-align: center;
					color: #666;
				}
			}
		}
		.hot {
			width: 80%;
			// height: 50%;
			margin: 0 auto;
			background-color: #ffffff;
			border-radius: 15px;
			overflow: hidden;
			margin-top: 70px;
			margin-bottom: 30px;

			.container {
				width: 88%;
				margin: 0 auto;

				.top {
					font-size: 22px;
					font-weight: bold;
					margin-top: 10px;
					padding-bottom: 10px;
					border-bottom: 1px solid #ccc;
					margin-bottom: 15px;
				}

				.list {
					width: 100%;
					position: relative;
					margin-top: 5px;
					padding: 5px 0;

					.rank {
						position: absolute;
						text-align: center;
						color: #aaa;
					}

					.name {
						margin-left: 25px;
					}

					.icon {
						position: absolute;
						top: 0;
						right: 0;
						width: 6%;

						img {
							width: 100%;
						}
					}
				}

			}
		}
	}
</style>

<template>
	<view class="search">
		<div class="search-top">
			<div class="container">
				<div class="back" @click="back">
					<uni-icons type="left" size="24" color="#000"></uni-icons>
				</div>
				<input class="ipt" v-model="text" type="text" placeholder="请输入关键字">
				<div class="btn" @click="search(text)"><span>搜索</span></div>
			</div>
		</div>
		<div class="loading" v-if="isLoading" style="position: absolute; top: 40%;left:30%;">
			<loading></loading>
		</div>
		<div class="searchList">
			<div class="container">
				<div class="songLi" v-for="(item,index) in arr">
					<div class="song" @click="toMusic(item.id)">
						<div class="name">
							<span>{{item.name}}</span>
						</div>
						<div class="row">
							<div class="vipTag" v-if="item.fee=='VIP'">
								<span>{{item.fee}}</span>
							</div>
							<div class="tag">
								<span>超清母带</span>
							</div>
							<div class="author">
								<span>{{item.author}}</span>
							</div>
						</div>
					</div>
					<div class="more">
						<uni-icons type="more-filled" size="26" color="#cccccc" ></uni-icons>
					</div>
				</div>
				<p class="bottom">~到底了~</p>
			</div>
		</div>
		<div class="hot">
			<div class="container">
				<div class="top">
					<span>热搜榜</span>
				</div>
				<div class="list" v-for="(item,index) in hotList">
					<div class="rank"><span>{{index+1}}</span></div>
					<div class="name"><span>{{item.searchWord}}</span></div>
					<div class="icon"><img :src="item.iconUrl" alt="" /></div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		getSearchHot
	} from '../../api/request';
	import {
		getSearch
	} from '../../api/request';
	import loading from '../../components/loading.vue';
	export default {
		components:{
			loading
		},
		data() {
			return {
				hotList: [],
				text: '',
				isLoading: false,
				arr: [],
			};
		},
		async onLoad() {
			await this.getSearchHotFn()
		},
		methods: {
			async getSearchHotFn() {
				await getSearchHot()
					.then(
						(res) => {
							let {
								data,
								code
							} = res
							if (code == 200) {
								let newArr = data.map(item => {
									let obj = {}
									obj.searchWord = item.searchWord
									if (item.iconUrl != null) {
										obj.iconUrl = item.iconUrl
									} else {
										obj.iconUrl = ''
									}

									return obj
								})
								this.hotList = newArr
							}

						})
			},
			async search(keywords) {
				this.isLoading=true
				await getSearch({
						keywords
					})
					.then(
						(content) => {
							
							let {
								result
							} = content
							// console.log(JSON.stringify(content))
							let {
								songs
							} = result
							let newArr = result?.songs.map(item => {
								let obj = {};
								obj.id = item.id;
								obj.name = item.name;
								if (item.ar.length > 1) {
									obj.author = item.ar.map((author, index) => {
										return index === 0 ? author.name : ' / ' + author.name;
									}).join('');
								} else {
									obj.author = item.ar[0].name;
								}
								if(item.fee=0){
									obj.fee=''
								}else if(item.fee=1){
									obj.fee='VIP'
								}else{
									obj.fee=''
								}
								return obj
							})
							this.arr=newArr
							console.log(JSON.stringify(this.arr))
						})
						setTimeout(()=>{
							this.isLoading=false
						},400)
						
			},
			toMusic(id){
				uni.navigateTo({
					url: "/pages/music/music?id=" + id
				}),
				localStorage.setItem('SongList',JSON.stringify(this.arr))
			},
			back(){
				uni.navigateBack()
			}
		},
	}
</script>